<script setup lang="ts">
import { ref, toRef } from 'vue'
import type { BannerItem } from '@/types/home'

export interface Props {
  list: BannerItem[]
}

const activeIndex = ref(0)

//defineProps<>() <>内是声明，()内是校验，且不能同时存在
// 1.props的 声明 + 默认值
withDefaults(defineProps<Props>(), {
  list: () => [],
})
// 2.校验
// defineProps({
//   list: {
//     type: Array,
//     required: true,
//     validator(value) {
//       return true
//     },
//   },
// })

const onchange: UniHelper.SwiperOnChange = (ev) => {
  activeIndex.value = ev.detail.current
}
</script>

<template>
  <view class="carousel">
    <swiper :autoplay="false" :circular="true" :interval="3000" @change="onchange">
      <swiper-item v-for="item in list" :key="item.id">
        <navigator
          url="/pages/index/index"
          open-type="navigate"
          hover-class="none"
          class="navigator"
        >
          <image class="image" :src="item.imgUrl" mode="widthFix" />
        </navigator>
      </swiper-item>
    </swiper>
    <view class="indicator">
      <text
        class="dot"
        :class="{ active: index == activeIndex }"
        v-for="(item, index) in list"
        :key="item.id"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
@import './styles/XtxSwiper.scss';
</style>
